<template>
  <div class="">
    <div class="">
      <!-- <div class="common_title pad_b20">系统消息</div>
      <el-form :model="queryParams" ref="queryForm" class="margin_t20" label-width="90px">
        <el-row class="flex flex_w">
          <FormItem label="消息类型" type="select" :form="queryParams"  prop="type" :seleDatas="typeOptions" seleKey="id" seleName="title" clearable />
          <div class="search_btns pad_l20">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
          </div>
        </el-row>
      </el-form> -->
      <!-- <div class="common_line"></div>
      <div class="common_button flex_ac">
        <div class="right_button margin_a flex">
          <a href="javascript:;" class="color_blue " @click="handleUpdate"><img src="@/assets/add.png" class="btn_img">新增</a>
        </div>
      </div> -->
    </div>
    <div class="common_block_div">
      <el-table v-loading="loading" :data="list"  border >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="标题" align="left" prop="title"  />
        <el-table-column label="是否已读" align="center"width="120px">
          <template slot-scope="scope">
            <el-tag :type="scope.row.is_read==1?'success':'danger'">{{scope.row.is_read==1?'已读':'未读'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center" prop="create_time"  width="180"  />
        <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120px" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.limit"
        @pagination="getList"
      />
    </div>

  </div>
</template>

<script>

export default {
  name: 'needCache',
  data () {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      loading: true,
      total: 0,
      // 定时任务表格数据
      list: [],
      // 查询参数
      queryParams: {
        page: 1,
        limit: 16
      },
      is_ajax:false,
      typeOptions:[]
    }
  },
  activated() {
    this.getList();
    // this.get_options()
  },
  methods:{
    get_options(){
      const _this=this;
      _this.axios.get("/api/Message/getType", {params:{}}).then(function(res) {
        if(res){
          _this.typeOptions = res.data;
        }
      }).catch(function(error) {
        console.log(error);
      })
    },

    /** 删除按钮操作 */
    // handleDelete(row) {
    //   const _this=this;
    //   const ids = row.id?[row.id]:_this.ids;
    //   if(ids.length==0){
    //     _this.$message.error('请选择要操作的数据');
    //     return false;}
    //   this.$confirm('是否确认删除?', "警告", {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //       type: "warning"
    //     }).then(function() {
    //       _this.axios.post("/api/inspection.InspectionItem/delete", {ids:ids}).then((res) => {
    //           if (res) {
    //               _this.getList();
    //               _this.$message.success('操作成功');
    //           }
    //       }).catch((err) => {
    //           console.log(err);
    //       });
    //     })
    // },
    getList() {
      const _this=this;
      this.loading = true;
      _this.axios.get("/manage/Message/index", {params:this.queryParams}).then(function(res) {
        if(res){
          _this.list = res.message.data;
          _this.total = res.message.total;
          _this.loading = false;
          // _this.openOptions=_this.obj2arr(res.message.search.status)
        }
      }).catch(function(error) {
        console.log(error);
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams={
        page: 1,
        limit: 16
      }
      this.handleQuery();
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .title{line-height: 44px; font-size: 20px;}
</style>
